<style lang="less">
@import "~assets/styles/table-common.less";
</style>
<template>
<div class="search">
    <Card>
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
            <Form ref="searchForm" :model="searchForm" inline :label-width="70">
                <Form-item label="姓名" prop="nickName">
                    <Input type="text" v-model.trim="searchForm.nickName" clearable placeholder="请输入姓名" style="width: 200px" />
                </Form-item>
                <Form-item label="公司名称" prop="companyName">
                    <Input type="text" v-model.trim="searchForm.companyName" clearable placeholder="请输入公司名称" style="width: 200px" />
                </Form-item>

                <Form-item label="手机号" prop="licenseeMobile">
                    <Input type="text" v-model.trim="searchForm.licenseeMobile" clearable placeholder="请输入手机号" style="width: 200px" />
                </Form-item>
                <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                    <Button @click="handleReset">重置</Button>
                </Form-item>
            </Form>
        </Row>
        <Row class="operation">
            <Button @click="setCleAll" type="primary" icon="md-flame">设置专委会会员</Button>
            <Button @click="unsetCleAll" icon="md-bonfire">取消设置专委会会员</Button>
            <Dropdown @on-click="handleDropdownExport">
                <Button>
                    导出数据
                    <Icon type="md-arrow-dropdown" />
                </Button>
                <DropdownMenu slot="list">
                    <DropdownItem name="search">导出检索数据</DropdownItem>
                    <DropdownItem name="selected">导出选中数据</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <Button @click="handleResetPass">重置用户密码</Button>
            <Button type="dashed" @click="openSearch=!openSearch">{{openSearch ? "关闭搜索" : "开启搜索"}}</Button>
            <Button type="dashed" @click="openTip=!openTip">{{openTip ? "关闭提示" : "开启提示"}}</Button>
        </Row>
        <Row v-show="openTip">
            <Alert show-icon>
                已选择
                <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
        </Row>
        <Row>
            <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
        </Row>
        <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
    </Card>
    <!-- 自定义导出数据 -->
    <Modal v-model="exportModalVisible" :title="exportTitle" :loading="loadingExport" @on-ok="exportCustomData">
        <Form ref="exportForm" :label-width="85">
            <FormItem label="导出文件名">
                <Input v-model="filename" />
            </FormItem>
            <FormItem label="自定义导出列">
                <CheckboxGroup v-model="chooseColumns">
                    <Checkbox v-for="(item, i) in exportColumns" :label="item.title" :key="i" :value="item.checked" :disabled="item.disabled"></Checkbox>
                </CheckboxGroup>
            </FormItem>
        </Form>
    </Modal>

    <check-password ref="checkPass" @on-success="resetPass" />
</div>
</template>

<script>
import {
    mapActions
} from 'vuex'

// 指定导出列数据
import {
    exportColumn
} from "@/libs/export/licensee-manage/exportColumn";
import excel from "@/libs/excel";
import victorExcel from "@/libs/victorExcel";
import checkPassword from "@/my-components/hboot/check-password";

export default {
    name: "licensee-manage",
    components: {
        checkPassword
    },
    data() {
        return {
            //导出部分 开始
            exportModalVisible: false,
            loadingExport: true,
            exportColumns: exportColumn,
            chooseColumns: [],
            filename: "被授权商数据",
            exportTitle: "确认导出",
            exportType: "",
            exportData: [],
            //导出部分 结束
            height: 510,
            openSearch: true,
            openTip: true,
            loading: true,
            selectCount: 0,
            selectList: [],
            searchForm: {
                licenseeMobile: '',
                nickName: '',
                companyName: '',
                status: "",
                pageNumber: 1,
                pageSize: 10,
                sort: "createTime",
                order: "desc",
            },

            submitLoading: false,
            columns: [{
                    type: "selection",
                    width: 60,
                    align: "center",
                    fixed: "left"
                },
                {
                    type: "index",
                    width: 60,
                    align: "center",
                    fixed: "left"
                },
                {
                    title: "姓名",
                    key: "nickName",
                    minWidth: 120,
                    sortable: true,
                },
                {
                    title: "公司名称",
                    key: "companyName",
                    minWidth: 120,
                    sortable: true,
                },
                {
                    title: "职位",
                    key: "position",
                    minWidth: 120,
                    sortable: true,
                },
                {
                    title: "部门",
                    key: "dept",
                    minWidth: 120,
                    sortable: true,
                },
                {
                    title: "邮件",
                    key: "licenseeEmail",
                    minWidth: 160,
                    sortable: true,
                },
                {
                    title: "手机",
                    key: "licenseeMobile",
                    minWidth: 130,
                    sortable: true,
                },
                {
                    title: "专委会会员",
                    key: "isCle",
                    align: "center",
                    width: 140,
                    render: (h, params) => {
                        if (params.row.isCle == '1') {
                            return h("div", [
                                h("Badge", {
                                    props: {
                                        status: "success",
                                        text: "是"
                                    }
                                })
                            ]);
                        } else if (params.row.isCle == '0') {
                            return h("div", [
                                h("Badge", {
                                    props: {
                                        status: "error",
                                        text: "否"
                                    }
                                })
                            ]);
                        }
                    },
                    filters: [{
                            label: "是",
                            value: '1'
                        },
                        {
                            label: "否",
                            value: '0'
                        }
                    ],
                    filterMultiple: false,
                    filterMethod(value, row) {
                        if (value == '1') {
                            return row.isCle == '1';
                        } else if (value == '0') {
                            return row.isCle == '0';
                        }
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    align: "center",
                    width: 110,
                    render: (h, params) => {
                        if (params.row.status == 0) {
                            return h("div", [
                                h("Badge", {
                                    props: {
                                        status: "success",
                                        text: "正常启用"
                                    }
                                })
                            ]);
                        } else if (params.row.status == -1) {
                            return h("div", [
                                h("Badge", {
                                    props: {
                                        status: "error",
                                        text: "禁用"
                                    }
                                })
                            ]);
                        }
                    },
                    filters: [{
                            label: "正常启用",
                            value: 0
                        },
                        {
                            label: "禁用",
                            value: -1
                        }
                    ],
                    filterMultiple: false,
                    filterMethod(value, row) {
                        if (value == 0) {
                            return row.status == 0;
                        } else if (value == -1) {
                            return row.status == -1;
                        }
                    }
                },
                {
                    title: "创建时间",
                    key: "createTime",
                    sortable: true,
                    sortType: "desc",
                    width: 180
                },
                {
                    title: "操作",
                    key: "action",
                    width: 200,
                    align: "center",
                    fixed: "right",
                    render: (h, params) => {
                        let enableOrDisable = "";
                        if (params.row.status == 0) {
                            enableOrDisable = h(
                                "Button", {
                                    props: {
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.disable(params.row);
                                        }
                                    }
                                },
                                "禁用"
                            );
                        } else {
                            enableOrDisable = h(
                                "Button", {
                                    props: {
                                        type: "success",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.enable(params.row);
                                        }
                                    }
                                },
                                "启用"
                            );
                        }
                        return h("div", [enableOrDisable]);
                    }
                }
            ],
            data: [],
            total: 0,
        };
    },
    mounted() {
        // 计算高度
        this.height = Number(document.documentElement.clientHeight - 230);
        this.init();
        // console.log('mounted in licensee-manage')
    },
    methods: {
        ...mapActions({
            getLicenseeList: 'data/getLicenseeList',
            enableUser: 'data/enableUser',
            disableUser: 'data/disableUser',
            resetUserPass: 'data/resetUserPass',
            setUserCle: 'data/setUserCle',
            unsetUserCle: 'data/unsetUserCle',
        }),

        init() {
            this.getDataList();
            this.initExportColumns();

        },
        //初始化导出列数据
        initExportColumns() {
            // 初始化导出列数据
            let array = [];
            this.exportColumns.forEach(e => {
                array.push(e.title);
            });
            this.chooseColumns = array;
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        getDataList() {
            // 多条件搜索用户列表
            this.loading = true;
            this.getLicenseeList(this.searchForm).then(res => {
                this.loading = false;
                if (res.success) {
                    this.data = res.result.records;
                    this.total = res.result.total;
                }
            });
        },
        handleSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.selectDate = null;
            this.searchForm.startDate = "";
            this.searchForm.endDate = "";
            // 重新加载数据
            this.getDataList();
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == "normal") {
                this.searchForm.order = "";
            }
            this.getDataList();
        },
        handleResetPass() {
            if (this.selectCount <= 0) {
                this.$Message.warning("您还未选择要重置密码的用户");
                return;
            }
            this.$refs.checkPass.show();
        },
        resetPass() {
            if (this.selectCount <= 0) {
                this.$Message.warning("您还未选择要重置密码的用户");
                return;
            }
            this.$Modal.confirm({
                title: "确认重置",
                content: "您确认要重置所选的 " +
                    this.selectCount +
                    " 条用户数据密码为【123456】?",
                loading: true,
                onOk: () => {
                    let ids = "";
                    this.selectList.forEach(function (e) {
                        ids += e.id + ",";
                    });
                    ids = ids.substring(0, ids.length - 1);
                    this.resetUserPass({
                        ids: ids
                    }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },

        cancelUser() {
            this.modalVisible = false;
        },
        enable(v) {
            this.$Modal.confirm({
                title: "确认启用",
                content: "您确认要启用用户 " + v.nickName + " ?",
                loading: true,
                onOk: () => {
                    this.enableUser(v.id).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.getDataList();
                        }
                    });
                }
            });
        },
        async disable(v) {
            this.$Modal.confirm({
                title: "确认禁用",
                content: "您确认要禁用用户 " + v.nickName + " ?",
                loading: true,
                onOk: async () => {
					console.log("v.id:",v.id)
					const res =await this.disableUser(v.id);
					this.$Modal.remove();
					if (res.success) {
						this.$Message.success("操作成功");
						this.getDataList();
					}
                }
            });
        },
        //设置CLE
        setCleAll() {
            if (this.selectCount <= 0) {
                this.$Message.warning("您还未选择要设置的数据");
                return;
            }
            this.$Modal.confirm({
                title: "确认设置专委会会员",
                content: "您确认要设置所选的 " + this.selectCount + " 条数据?",
                loading: true,
                onOk: () => {
                    let userIds = [];
                    this.selectList.forEach(function (e) {
                        userIds.push(e.id);
					});
					console.log('设置')
                    this.setUserCle({
                        ids: userIds.join(',')
                    }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("设置成功");
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        //取消设置CLE
        unsetCleAll() {
            if (this.selectCount <= 0) {
                this.$Message.warning("您还未选择要取消的数据");
                return;
            }
            this.$Modal.confirm({
                title: "确认取消设置专委会会员",
                content: "您确认要取消所选的 " + this.selectCount + " 条数据?",
                loading: true,
                onOk: () => {
                    let userIds = [];
                    this.selectList.forEach(function (e) {
                        userIds.push(e.id);
                    });
                    this.unsetUserCle({
                        ids: userIds.join(',')
                    }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("取消成功");
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        showSelect(e) {
            this.exportData = e;
            this.selectList = e;
            this.selectCount = e.length;
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        handleDropdownExport(name) {
            if (name == "search") {
                this.exportType = "all";
                this.exportModalVisible = true;
                this.exportTitle = "确认导出全部 " + this.total + " 条数据";
                let searchForm = {};
                for (let v in this.searchForm) {
                    searchForm[v] = this.searchForm[v];
                }
                searchForm.pageNumber = 1;
                searchForm.pageSize = 2147483647;
                getLicenseeList(searchForm).then(res => {
                    if (res.success) {
                        this.exportData = res.result.records;
                    }
                });
            } else if (name == "selected") {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要导出的数据");
                    return;
                }
                this.exportType = "part";
                this.exportModalVisible = true;
                this.exportTitle = "确认导出 " + this.selectCount + " 条数据";
            }
        },
        exportCustomData() {
            if (this.filename == "") {
                this.filename = "导出数据";
            }
            // 判断勾选导出列
            let array = [];
            this.exportColumns.forEach(e => {
                this.chooseColumns.forEach(c => {
                    if (e.title == c && !e.disabled) {
                        array.push(e);
                    }
                });
            });
            this.exportModalVisible = false;
            victorExcel.downloadExl({
                exportColumn: array,
                data: this.exportData,
                fileName: this.filename,
            });

        },
    },

};
</script>
